<template>
	<view class="container">
		<view class="con_header">
			<view class="header" style="text-align: center;">
				<view class="">
					软件名称
				</view>
			</view>
			<!--头像与用户名  设置  -->
			<view class="mian_header">
				<view class="headm_left">
					<!-- <view class="heade_image"> -->
					<!-- 头像 -->
					<image class="heade_image" :src="info.avatar" mode=""></image>
					<!-- </view> -->
					<text>{{info.nickname}}</text>
				</view>
				<image class="shezhi" src="../../static/img/two.png" mode="" @click="gopath('setting/setting')"></image>
			</view>
		</view>

		<view class="con_mian">
			<!-- 余额 -->
			<view class="mian_moeny" @click="gopath('pricelist/pricelist')">
				<text>账户余额 ： {{info.money}}</text>
				<view class="pay" @click.stop="gopath('pay/pay')">
					充值
				</view>
			</view>
			<!-- 收藏 优惠将 -->
			<view class="mian_silde">
				<view class="silde_item" @click="gopath('shoucan/shoucan')">
					<view class="item_text">
						<text style="font-size: 16px; color: #333333; font-weight: bold;">我的收藏</text>
						<text style="font-size: 12px; color: #999999;">已收藏{{info.collection}}</text>
					</view>
					<image class="item_img"
						src="../../static/img/7f1d3a3db59e32f5c287353caf80076fd7268e3158d03-ebmlpW@2x.png" mode="">
					</image>
				</view>
				<view class="silde_item" @click="gopath('youhuijuan/youhuijuan')">
					<view class="item_text">
						<text style="font-size: 16px; color: #333333; font-weight: bold;">我的优惠券</text>
						<text style="font-size: 12px; color: #999999;">已拥有{{info.coupon_count}}</text>
					</view>
					<image class="item_img"
						src="../../static/img/073814a0560b807d6c9d20ac2f3d2913faf3052f11416-EIyze0@2x.png" mode="">
					</image>
				</view>
			</view>
			<!-- 路径 -->
			<view class="mian_path">
				<view class="path_title">
					常用功能
				</view>
				<view class="path_item">
					<view class="itemp" v-for="(item,index) in list" :key="index" @click="showpop(item.name,item.path)">
						<view class="itempimg">
							<image class="itempimg" :src="item.url" mode=""></image>
						</view>
						<text>{{item.name}}</text>
					</view>
				</view>
			</view>
		</view>


		<u-popup :show="showfag" mode="center" round="10">
			<view class="showpop">
				<text style="color: #333333; font-size: 17px ; font-weight: bold;">绑定邀请码</text>
				<view class="poptext">
					你已绑定过邀请码（123456789）<br />
					无法更换已绑定的邀请码
				</view>
				<view class="btn" @click="showfag =!showfag">
					我已知晓
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				showfag: false,
				list: [{
						name: '意见反馈',
						path: '../feedback/feedback',
						url: "../../static/img/six.png"
					},
					{
						name: '联系客服',
						path: '',
						url: "../../static/img/eight.png"
					},
					{
						name: '地址管理',
						path: '../index/addresslist/addresslist',
						url: "../../static/img/three.png"
					},
					{
						name: '护工招募',
						path: '/pages/mine/addcare/addcare',
						url: "../../static/img/four.png"
					},
					{
						name: '商家入驻',
						path: '/pages/mine/addbusiness/addbusiness',
						url: "../../static/img/five.png"
					},
					{
						name: '绑定邀请码',
						path: '',
						url: "../../static/img/seven.png"
					},
					{
						name: '关于我们',
						path: '',
						url: "../../static/img/one.png"
					},

				],
				info: {}
			}
		},
		onLoad() {
			this.getmine()
		},
		methods: {
			async getmine() {
				const res = this.$api('/api/user/user', 'post').then((res) => {
					// console.log(res);
					// console.log(res.data.data);
					this.info = res.data.data
				})
			},
			gopath(i) {
				uni.navigateTo({
					url: `/pages/${i}`
				})
			},
			showpop(i, url) {
				if (i == '绑定邀请码') {
					this.showfag = true
				}
				if (url) {
					console.log(url);
					uni.navigateTo({
						url: url
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	view {
		box-sizing: border-box;
		font-family: PingFang SC, PingFang SC;
	}

	.showpop {
		width: 300px;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: center;
		padding: 15px;
		height: 220px;

		.btn {
			width: 100%;
			height: 40px;
			background: #FB774B;
			border-radius: 40px 40px 40px 40px;
			display: flex;
			justify-content: center;
			align-items: center;
			font-weight: bold;
			color: #FFFFFF;
			font-size: 16px;
		}

		.poptext {
			padding: 25px;
			color: #333333;
			font-size: 14px;
			text-align: center;
		}
	}

	.con_header {
		width: 100%;
		height: 200px;
		padding: 0 14px 10px 14px;
		background: linear-gradient(to bottom, #FB774B 0%, #FB784D 17%, #fff 100%, );


		.header {
			width: 100%;
			height: 90px;
			padding: 0 14px 10px 14px;
			display: flex;
			align-items: flex-end;
			justify-content: center;
			font-size: 16px;
			color: #fff;
			font-weight: 600;

		}

		.mian_header {
			margin-top: 20px;
			height: 70px;
			width: 100%;
			display: flex;
			justify-content: space-between;
			align-items: flex-start;

			.shezhi {
				width: 24px;
				height: 24px;
				// background-color: #fff;
			}

			.headm_left {
				flex: 1;
				display: flex;
				align-items: center;

				.heade_image {
					width: 70px;
					height: 70px;
					border-radius: 50%;
					margin-right: 10px;
					background-color: #fff;
				}

				text {
					font-weight: bold;
					font-size: 16px;
					color: #333333;
				}
			}
		}
	}

	.con_mian {
		padding: 0 15px;

		.mian_moeny {
			height: 90px;
			background: #FB774B;
			box-shadow: 0px 3px 6px 1px rgba(0, 0, 0, 0.01);
			border-radius: 10px 10px 10px 10px;
			width: 100%;
			display: flex;
			padding: 0 15px;
			margin-bottom: 12px;
			justify-content: space-between;
			align-items: center;

			text {
				font-size: 16px;
				font-weight: bold;
				color: #FFFFFF
			}

			.pay {
				height: 30px;
				background: #FFFFFF;
				border-radius: 26px 26px 26px 26px;
				font-weight: bold;
				color: #FB774B;
				font-size: 15px;
				padding: 4px 15px;
			}
		}

		.mian_silde {
			display: flex;
			margin-bottom: 15px;

			.silde_item {
				flex: 1;
				height: 65px;
				background-color: #FFEEE6;
				border-radius: 10px;
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 4px 15px;

				.item_img {
					width: 52px;
					height: 52px;
					// background-color: #fff;
				}

				.item_text {
					height: 100%;
					display: flex;
					flex-direction: column;
					justify-content: space-around;
				}

				&:first-child {
					margin-right: 15px;
				}
			}
		}

		.mian_path {
			width: 100%;
			min-height: 185px;
			background: #FFFFFF;
			box-shadow: 0px 0px 6px 1px rgba(0, 0, 0, 0.08);
			border-radius: 10px 10px 10px 10px;
			padding: 15px;

			.path_title {
				font-size: 15px;
				font-weight: bold;
				color: #333333;
			}

			.path_item {
				width: 100%;
				display: flex;
				flex-wrap: wrap;

				.itemp {
					min-width: 25%;
					display: flex;
					flex-direction: column;
					justify-content: space-around;
					align-items: center;
					height: 55px;
					margin-top: 20px;

					.itempimg {
						width: 20px;
						height: 20px;
						// background-color: #FB774B;
					}

					text {
						font-weight: bold;
						font-size: 12px;
						color: #333333;
					}
				}
			}
		}

	}
</style>